<script setup>
import empty from '../../assets/img/empty.png'
import { reactive, onMounted, onBeforeUnmount, computed } from 'vue';
import { useStore } from 'vuex';
const store = useStore()
const api = store.state.api
let rankInfo = reactive({
    result: []
})
for (let i = 0; i < 5; i++) {
    rankInfo.result.push({ rankNo: i + 1, lUNickName: "虚位以待", lUId: -1 })
}
let rewardList=[
    [{src:'tuijianka.png',html:'推荐卡<br>200张'},{src:'diantang.png',html:'荣耀殿堂<br>页面展示'}],
  [{src:'tuijianka.png',html:'推荐卡<br>150张'},{src:'diantang.png',html:'荣耀殿堂<br>页面展示'}],
  [{src:'tuijianka.png',html:'推荐卡<br>100张'},{src:'diantang.png',html:'荣耀殿堂<br>页面展示'}],
  [{src:'tuijianka.png',html:'推荐卡<br>80张'},{src:'diantang.png',html:'荣耀殿堂<br>页面展示'}],
  [{src:'tuijianka.png',html:'推荐卡<br>50张'},{src:'diantang.png',html:'荣耀殿堂<br>页面展示'}],
];

const getRankInfo = async () => {

    await api.unionRank().then(res => {
        // res = {
        //     data: {
        //         "errcode": 0,
        //         "result": [
        //             {
        //                 "ancrankno": 0,
        //                 "diffValue": 0,
        //                 "lUId": 0,
        //                 "lUNickName": "after",
        //                 "lUPic": "http://qiqi-resource.qxiu.com/op/2018/09/21/3098b292e0ae472faf23a78ef2d92a3b.jpg",
        //                 "rankNo": 1,
        //                 "scores": 1,
        //                 "timeStampe": 1676873414627
        //             }
        //         ],
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
      console.log('guidList ==',res.data.result);
        if (res.data.result) {
            let data = res.data.result
            data.forEach((item, i) => {
                let index = rankInfo.result.findIndex((t) => { return t.rankNo == item.rankNo })
                if (index >= 0) rankInfo.result[i] = item
            });
        }
    })
}
const rank = computed(() => {
    return rankInfo.result
})
let timer
onMounted(() => {
    getRankInfo()
    timer = setInterval(() => {
        getRankInfo()
    }, 30 * 1000);
})
onBeforeUnmount(() => {
    clearInterval(timer)
})

// 获取本地图片
const getAssetsImages = (name) => {
  return new URL(`../../assets/img/list/guild/${name}`,
      import.meta.url).href;
}
</script>

<template>
    <div class="userList guildList">
        <div class="part1">
            <div class="part1Item" v-for="(item, index) in rank" :key="index" :class="'part1Item' + index">
                <div class="back"><img :src="getAssetsImages('p1back'+(index+1)+'.png')"> </div>
                <div class="headImg">
                  <img :src="item.lUPic || empty" alt="">
                  <div class="levlDiv"></div>
                  <!--<span>{{ item.rankNo }}</span>-->
                </div>
                <!--<p class="name">{{ item.lUNickName }}</p>
                <p v-if="item.lUId != -1">ID：{{ item.lUId }}</p>
                <p v-if="item.lUId != -1">
                    <span>总联赛值</span>
                    <span>{{ item.scores }}</span>
                </p>-->
              <p>{{item.lUNickName}}</p>
              <p v-if="item.lUId != -1">ID：{{ item.lUId }}</p>
              <p v-if="item.lUId != -1">
                <span>总联赛值：</span>
                <span>{{item.scores}}</span>
              </p>
            </div>
        </div>
        <div class="part2">
            <p>统计3月20日-29日春季联赛期间，公会旗下所有参赛主播通过收取专属礼物得到的联赛值，按联赛值进行排名</p>
        </div>
        <div class="part3">
          <!--

          -->
          <div class="title">
            <div class="l"></div><div class="r"></div>
          </div>
          <div class="con">
            <div class="part3Item" v-for="(item, index) in rewardList" :key="index" :class="'part3Item' + index">
              <div :class="['item','item'+index]">
               <div class="awcon">
                 <div class="awing" v-for="(awitem,awindex) in item" key="awindex">
                   <div class="imgcls" ><img :src="getAssetsImages(awitem.src)"></div>
                   <div class="aname" v-html="awitem.html"></div>
                 </div>
               </div>

              </div>
            </div>
          </div>

      </div>
  </div>
</template>

<style lang='scss' scoped></style>
